import React from 'react'
import PropTypes from 'prop-types'
import { Button } from 'antd'
import { FileTextFilled } from '@ant-design/icons'
import { modifyStatusList } from '@js/config'
import { CaseContext } from '../context'
import style from './CaseNo.module.less'
import TypeTagList from './TypeTagList'
import moment from 'moment'

// 案号标题
function CaseNoTitle ({ caseDetail: d }) {
  if (!d) {
    return <span />
  }
  const otherNo = d.counter_caseno_desc
  return (
    <span className={style['case-no']}>
      {d.caseno_desc || d.acceptno_desc || '收案号 无'}
      <span className={style['other-case-no']}>{otherNo ? `/${otherNo}` : ''}</span>
    </span>
  )
}

// 修改按钮
function ModifyBtn ({ caseDetail: d, fullInfo }) {
  if (!d) {
    return <span />
  }
  const noOld = d.accept_datetime * 1000 > moment('2022-03-13 00:00:00')
  let type = noOld ? '查看详情' : '修改信息'
  if (!d.cause_action) {
    type = '完善信息'
  } else if (modifyStatusList.indexOf(d.status) !== -1) {
    type = '修改信息'
  }
  return (
    <span className={style['modify-btn-line']}>
      <Button type='primary' ghost onClick={() => fullInfo(type)}>{type}</Button>
    </span>
  )
}

function Main ({ caseDetail, fullInfo }) {
  return (
    <CaseContext.Consumer>
      {({ caseDetail }) => {
        return (
          <div className={style.container}>
            <span className={style['case-icon']}><FileTextFilled /></span>
            <CaseNoTitle caseDetail={caseDetail} />
            <TypeTagList caseDetail={caseDetail} />
            <ModifyBtn caseDetail={caseDetail} fullInfo={fullInfo} />
          </div>
        )
      }}
    </CaseContext.Consumer>
  )
}

Main.propTypes = {
  fullInfo: PropTypes.func,
  caseDetail: PropTypes.object
}

Main.defaultProps = {
  fullInfo: () => {},
  caseDetail: null
}

export default Main
